import React from "react";
import styles from "./index.module.less";
import SvgIcon from "@components/SvgIcon";
import { connect } from "react-redux";
import {
    selectItemNameShowChatHead,
    setChaterMessageReadAction,
    friendItemToMainDataAction,
} from "@redux/actions02";
import { useNavigate, useParams } from "react-router-dom";
import formatChatDate from "@utils/formatChatDate";

const FriendItemMould = (props) => {
    const {
        selectItemNameShowChatHead,
        item,
        setChaterMessageReadAction,
        friendItemToMainDataAction,
    } = props;
    const navigate = useNavigate();
    const { id } = useParams();

    const contextOper = (e) => {
        const x = e.clientX;
        const y = e.clientY;

        const transData = {
            x,
            y,
            isShowCard: true,
            friend: item,
        };

        friendItemToMainDataAction(transData);
    };

    return (
        <div
            className={`${styles.friend_item_mould} ${
                id && id === item.userName ? styles.active : ""
            }`}
            onClick={async (e) => {
                selectItemNameShowChatHead(item.byname || item.userName);
                navigate("/web-chat/chat/chat-window/" + item.userName);
                // 点击时，设置来自该用户的消息为已读
                if (item.userName && item.notReadCount) {
                    setChaterMessageReadAction(item.userName);
                }
            }}
            onContextMenu={(e) => {
                contextOper(e);
            }}
        >
            <div className={styles.user_head}>
                {item.avatarUrl ? (
                    <img
                        src={require(`@images/head/${item.avatarUrl}`)}
                        alt=""
                    />
                ) : (
                    <SvgIcon font="icon-morentouxiang" />
                )}
                {item.isBlockedChat || !item.notReadCount ? null : (
                    <span className={styles.not_read_count}>
                        {item.notReadCount}
                    </span>
                )}
            </div>
            <div className={styles.rig}>
                <div className={styles.up}>
                    <p className={styles.user_name}>
                        {item.byname || item.userName}
                    </p>
                    <p className={styles.date}>
                        {item.lastMessage
                            ? formatChatDate(item.lastMessage.date)
                                  .replace(/年|月/g, "/")
                                  .replace("日", "")
                            : ""}
                    </p>
                </div>
                <div className={styles.down}>
                    <div className={styles.msg_wrap}>
                        <p
                            className={styles.other_msg}
                            style={{ display: "none" }}
                        ></p>
                        <p
                            className={styles.at_me}
                            style={{ display: "none" }}
                        ></p>
                        {item.lastMessage ? (
                            item.lastMessage.messageType === "TEXT" ? (
                                <p
                                    className={styles.msg}
                                    dangerouslySetInnerHTML={{
                                        __html: item.lastMessage.content,
                                    }}
                                ></p>
                            ) : (
                                <p className={styles.msg}>
                                    {item.lastMessage.messageType === "BIGEMOJI"
                                        ? "[图片表情]"
                                        : item.lastMessage.messageType ===
                                          "IMAGE"
                                        ? "[图片]"
                                        : ""}
                                </p>
                            )
                        ) : null}
                    </div>
                    <div
                        className={styles.not_disturb}
                        style={{
                            display: item.isBlockedChat ? "block" : "none",
                        }}
                    >
                        <SvgIcon font="icon-xiaoximiandarao" />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default connect((state) => state, {
    selectItemNameShowChatHead,
    setChaterMessageReadAction,
    friendItemToMainDataAction,
})(FriendItemMould);
